<script setup lang="ts">

import CommonPurchaseSlot from "@/components/purchase/CommonPurchaseSlot.vue";
import {ref} from "vue";
import {UploadUserFile} from "element-plus";

const fileList = ref<UploadUserFile[]>([

])

const imageUrl = ref('')

const handleAvatarSuccess = (response: any, uploadFile: any) => {
  console.log(uploadFile)
  imageUrl.value = '../../assets/ceshi.jpg'
  fileList.value.push({name: uploadFile.name, url: uploadFile.url})
}

const upLoadSuccess = ref(false)
const uploadFiles = ref([])

const handleAvatarError = (error: Error, uploadFile: any, uploadFiles: any) => {
  console.log('uploadFiles:', uploadFile)
  console.log('uploadFiles:', uploadFiles)
  uploadFiles.value = uploadFiles
  fileList.value.push({name: uploadFile.name, url: uploadFile.url})

}
</script>

<template>
  <CommonPurchaseSlot slotTitle="添加大图"></CommonPurchaseSlot>
  <el-upload
      v-if="!upLoadSuccess"
      v-model:file-list="fileList"
      class="avatar-uploader"
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      list-type="picture-card"
      multiple
      :on-success="handleAvatarSuccess"
      :on-error="handleAvatarError"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
</template>

<style scoped lang="scss">

</style>
